<template>
    <div>
        <Row class="margin-top-10" :gutter="10">
            <Col :md="24" :lg="24">
                 <Card>
                    <p slot="title" class="card-title">
                        <Row class="" :gutter="10">
                            <Col :md="4" :lg="2">
                                <div style="margin-top: 2px;">
                                    <Icon type="ios-pulse"></Icon>
                                    {{this.$route.meta.title}}
                                </div>
                            </Col>
                            <Col :md="20" :lg="22">
                                <!-- <Form :model="formItem" label-position="left" inline>
                                    
                                    <Select v-model="model2" size="small" style="width:100px">
                                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                    :
                                    <Input size="small" v-model="queryData.user_name.value" style="width: 120px" placeholder="请输入用户名"></Input>
                                    
                                    <Button type="primary"  size="small" style="margin-top: 0px;" @click="search">查询</Button>
                                    <Button type="ghost"  size="small" style="margin-top: 0px;" @click="searchReset">重置</Button>                                 
                                </Form> -->
                            </Col>
                        </Row>
                    </p>
                    <div class="line-chart-con">
                        <div style="position: relative;">
                            <Table border stripe :columns="title" :data="data" ></Table>
                            <Spin size="large" fix v-if="tl"></Spin>
                        </div>
                        
                        <Row class="margin-top-10" :gutter="10">
                            <Page :total="pgc" :current.sync="pgo" class-name="page-margin-top" show-elevator @on-change="pageC" show-sizer @on-page-size-change="pageX"></Page>
                        </Row>
                        
                    </div>
                </Card>
            </Col>
        </Row>
        <Modal
            title="资金操作"
            v-model="actionModal"
            ok-text="确认"
            @on-ok="ok()"
            class-name="vertical-center-modal"
            width="240"
            >
            <Form :model="formItem" :label-width="80">
                <FormItem label="操作类型：">
                    <Select v-model="formItem.TypeID" style="width:120px">
                        <Option v-for="(item,index) in types" :value="index" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem v-if="this.types.length>0&&this.types[this.formItem.TypeID].type_id==2" label="已付金额：">
                    <Input number v-model="formItem.Paid" style="width: 120px" placeholder="请输入已付金额"></Input>
                </FormItem>
                <FormItem label="操作金额：">
                    <Input number v-model="formItem.Money" style="width: 120px" placeholder="请输入操作金额"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<style lang="less">
.order{
    font-size: 16px;
    margin-left: 5px;
}
    .fold-enter-active, .fold-leave {
        transition: all .4s;
        opacity: 1;
    }
    .fold-enter, .fold-leave-active {
        transition: all .4s;
        opacity: 0;
    }
    .oc_popup{
        box-shadow: 0px 0px 20px 0px #9a9a9a;
        .oc_popup_title{
            border-bottom: 1px solid #e9eaec;
            padding: 14px 16px;
            line-height: 1;
            overflow: hidden;
            
            .oc_popup_title_t{
                float: left;
            }
            .oc_popup_title_x{
                float: right;
                
            }
        }
        .oc_popup_content{
            padding: 14px 16px;
            line-height: 1;
            .ivu-table-wrapper{
                height: 100% !important;
                .ivu-table-body{
                    height: calc(~"100% - 40px") !important;
                }
            }
        }
        .oc_popup_bottom{
            border-top: 1px solid #e9eaec;
            padding: 14px 16px;
            line-height: 1;
            button{
                float: right;
                margin-left: 10px;
            }
        }
    }
    .oc_popup:hover{
        
    }
    .icon {
        width: 17px; height: 17px;
        // vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    .icon.e{
        width: 14px; height: 14px;
        margin-left: -1px;
        margin-top:3px;
    }
    .icon.c{
        width: 17px; height: 17px;
        margin-left: -3px;
        margin-top: 2px;
    }
    .icon.g{
        width: 19px; height: 19px;
        margin-left: -4px;
        margin-top: 1px;
    }
    .icon.f{
        width: 19px; height: 19px;
        margin-left: -3px;
        margin-top: 1px;
    }
    .icon.t{
        width: 20px; height: 20px;
        margin-left: -4px;
        margin-top: 0px;
    }
    .icon.s{
        width: 16px; height: 16px;
        margin-left: -2px;
        margin-top: 2px;
    }
    .ss{
        background:url('../../styles/s.jpg') !important;
        background-position:center !important;
        .ivu-table-column-center{
            background:none !important;
        }
    }
    .ivu-table-tbody .demo-table-info-row td{
        background-color: #44caff !important;
        border-right: 1px solid #44caff !important;
        color: #fff;
    }
    // .ivu-form-item{
    //     margin-bottom:0px;
    // }
    .ivu-card-head-inner, .ivu-card-head p{
        height: auto;
        overflow: inherit;
    }
    .page-margin-top{
        margin-top:10px;
    }
    .ivu-modal-wrap{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
    .line-chart-con-tree{
        border: 1px solid #ddd;
    }
    .line-chart-con-tree:hover{
        // border:0;
    }
    .vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
        .ivu-form-item {
            margin-bottom: 14px;
        }
    }
    
</style>
<script>
import '../../styles/fonts/iconfont'
import 'whatwg-fetch'
export default {
    components: {
        
    },
    computed: {
        
    },
    data () {
        return {
            actionModal:false,
            gameInfo:{},
            tl:false,
            pgo:1,
            queryData:{
                name:{
                    operator:'=',
                    value:''
                }
            },
            formItem:{
                TypeID:0,
                Paid:0,
                Money:0,
                ToUser:{}
            },
            pgc:0,
            userFilter:{
                order_param:'id',
                limit:'0,10',
                query_params:'group_level>-2'
            },
            types: [],
            model2: '用户名',
            data:[],
            title:[
                {
                    title:'用户名',
                    key: 'name',
                    align:'center',
                    
                },
                {
                    title:'用户级别',
                    key: 'group_name',
                    align:'center',
                    
                },
                {
                    title:'推荐码',
                    key: 'rcode',
                    align:'center',
                    
                },
                {
                    title:'可用余额',
                    key: 'balance',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.balance
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.userFilter.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'历史付款',
                    key: 'all_paid',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.all_paid
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.userFilter.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'历史欠款',
                    key: 'all_un_paid',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.all_un_paid
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.userFilter.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'备注',
                    key: 'comment',
                    align:'center',
                    
                },
                {
                    title:'操作',
                    key: '',
                    width: 180,
                    align:'center',
                    render: (h, params) => {
                        return h('div',[
                            h('i-Button', {
                                props: {
                                    type: 'ghost',
                                    size: 'small',
                                },
                                on: {
                                    click: () => {
                                        
                                        this.action(params)
                                    }
                                }
                            },'操作')
                        ])
                    }
                },
            ],
        }
    },
    computed: {

    },
    watch: {  

    },
    methods: {
        init(){
            this.gameInfo=JSON.parse(sessionStorage.gameInfo)
            this.getUsers()
        },
        order(key){
            this.userFilter.order_param=this.userFilter.order_param==key?'id':key
            this.getUsers()
        },
        ok(){
            let data={
                query:this.userFilter,
                data:this.formItem
            }
            data.data.TypeID=this.types[this.formItem.TypeID].type_id
            this.$api.repeater(this,'setAction',data).then(res=>{
                if(res.success==true){
                    this.$Notice.success({
                        title: '操作成功',
                        desc: `操作成功`
                    });
                }else{
                    this.$Notice.error({
                        title: '操作失败',
                        desc: res.error
                    });
                }
            })
            // this.$api.setAction(data).then(response=>{
            //     response.json().then(responseJson=> {
            //         if(responseJson.success==true){
            //             this.$Notice.success({
            //                 title: '操作成功',
            //                 desc: `操作成功`
            //             });
            //         }else{
            //             this.$Notice.error({
            //                 title: '操作失败',
            //                 desc: responseJson.error
            //             });
            //         }
            //     })
            // })
        },
        action(p){
            this.actionModal=true
            this.formItem.TypeID=0
            this.formItem.Money=0
            this.formItem.Paid=0
            this.formItem.ToUser=p.row
        },
        getUsers(){
            
            this.tl=true
            this.$api.repeater(this,'getAction',this.userFilter).then(res=>{
                this.data=res.data.Records
                this.pgc=res.data.Count
                this.types=res.types
                this.tl=false
            })
        },
        pageC(ev){
            let limit=this.userFilter.limit.split(",");
            this.userFilter.limit=`${(ev-1)*limit[1]},${limit[1]}`
            this.getUsers()
        },
        pageX(ev){
            this.userFilter.limit=`0,${ev}`
            this.getUsers()
        },
        czPage(){
            this.pgo=1
            let limit=this.userFilter.limit.split(",");
            this.userFilter.limit=`0,${limit[1]}`
        },
        // search(){
        //     if(this.queryMethod(this.queryData)!=false){
        //         this.userFilter.query_params=this.queryMethod(this.queryData)
        //         this.getUsers()
        //     }
        // },
        // searchReset(){
        //     if(this.queryMethod(this.queryData)!=false){
        //         this.userFilter.query_params=''
        //         this.queryData.user_name.value=''
        //         this.getUsers()
        //     }
        // }
    },
    created(){
        this.init()
    },
    
};
</script>
